<html>
    <head>
        <style>
        #container{width: 1300px;
        margin: 0 auto;  /*使container居中*/
        }
        #header{
            background-color: darkslategray;
            height: 130px;
            font-size: 16px;
        }
        #paragraph{
            background-color: lightseagreen;
            height: 550px;
            text-align: center;
            font-size: 30px;
        }
        #leftside{
            height: 450px;
            width: 440px;
            float: left;
        }
        #middle1{
            height: 450px;
            width: 470px;
            float: left;
        }
        #middle2{
            height:450px;
            width: 470px;
            float: left;
        }
        #rightside{
            height:  450px;
            width: 440px;
            float: left;
        }
        #footer1{
            background-color: powderblue;
            height: 600px;
            clear: both;
            text-align: center;
        }
        #footer2{
            background-color: lightslategray;
            height:  100px;
            clear: both;
            text-align: center;
        }
        </style>
    </head>
    <body>
      <div id="header">
          <br/>
          <h1 style="color:aliceblue;text-align: center">我的青春恋爱物语果然有问题</h1>
          <a href="#con" style="float:left;color:lightgray">咨询邮件！</a>
      </div>
      <div id="paragraph">
          <br/>
          <p>
              <img width="300px" src="D:\web前段开发\模板\YdPro\img\quanjia.jpg">
              <br/>
              <h3 style="color:aliceblue">不讴歌青春的人才是真正的正义所在。</h3>
              <p style="color:aliceblue">青春</p>
          </p>
          <div id="leftside" align="center">
              <h1 style="color:lightgray">雪之下雪乃</h1>
              <img src="D:\web前段开发\模板\YdPro\img\xuenai.jpg" height="260" width="300">
          </div>
         
          <div id="middle1" align="center">
              <h1 style="color:lightslategray">由比滨结衣</h1>
              <img src="D:\web前段开发\模板\YdPro\img\jieyi.jpg" height="260" width="300">
          </div>
         
          <div id="middle2" align="center">
              <h1 style="color:lightslategray">比企谷小町</h1>
              <img src="D:\web前段开发\模板\YdPro\img\xiaoding.jpg" height="260" width="300">
          </div>
          
          <div id="rightside" align="center">
              <h1 style="color:lightslategray">雪之下阳乃</h1>
              <img src="D:\web前段开发\模板\YdPro\img\yangnai.jpg" height="260" width="300">
          </div>
          <div id="footer1">
              <br/>
              <a name="con">
                  <h1 style="color:lightslategray">欢迎来到侍奉部小屋~
                <br/>欢迎咨询~电子邮箱地址↓
                </h1>
              </a>
              <div style="background-color:powderblue;width: 450px;height: 400px;float: left;"></div>
          </div>
          <div style="background-color:orange;width: 1000px;height: 600px;float: left;">
        <img src="D:\web前段开发\模板\YdPro\img\未标题-2.jpg" style="text-align:center ;">
        <br/>
        <form action="744033583@qq.com" method="POST" enctype="text/plain">
        <h6>欢迎发送email给我们~</h6>
        你的名字：<br/>
        <input type="text" name="name" value="你的名字" size="20">
        <br/>
        电子邮件：<br/>
        <input type="text" name="mail" value="电子邮件" size="20">
        <br/>
        委托：<br/>
        <input type="text" name="mail" value="委托？" size="20">
        <br/><br/>
        <input type="submit" value="发送">
        <input type="reset" value="重写">
        </form>
        </div>
      </div>
    </body>
</html>